<template>
    <div class="main">
        <Header/>
        <div class="card-box">
            <div class="columns">
                <div class="column" @click="reactEvent">
                    <h2>React项目</h2>
                    <h3>考务管理平台</h3>
                    <h4>推荐PC端进入</h4>
                    <h4>使用技术：</h4>
                    <ul>
                        <li>
                            <b>create-react-app</b>：搭建模块化工程
                        </li>
                        <li>
                            <b>react-router</b>：进行路由配置，实现页面跳转
                        </li>
                        <li>
                            <b>react-loadable</b>：实现路由懒加载
                        </li>
                        <li>
                            <b>react-redux</b>：进行全局状态管理
                        </li>
                        <li>
                            <b>ant design</b>：UI库，加快页面搭建速度
                        </li>
                        <li>
                            <b>ECharts</b>：数据可视化工具
                        </li>
                        <li>
                            <b>axios</b>：处理AJAX请求
                        </li>
                        <li>
                            <b>LESS</b>：工程化CSS
                        </li>
                    </ul>
                </div>
                <div class="column" @click="vueEvent">
                    <h2>Vue项目</h2>
                    <h3>仿·Smartisan商城·移动端</h3>
                    <h4>推荐移动端进入</h4>
                    <h4>使用技术：</h4>
                    <ul>
                        <li>
                            <b>vue-cli</b>：搭建模块化工程
                        </li>
                        <li>
                            <b>vue-router</b>：进行路由配置，实现页面跳转
                        </li>
                        <li>
                            <b>vuex</b>：进行全局状态管理
                        </li>
                        <li>
                            <b>Vant</b>：UI库，加快页面搭建速度
                        </li>
                        <li>
                            <b>axios</b>：处理AJAX请求
                        </li>
                        <li>
                            <b>SASS</b>：工程化CSS
                        </li>
                    </ul>
                </div>
                <div class="column" @click="jQueryEvent">
                    <h2>jQuery项目</h2>
                    <h3>仿·Smartisan商城·PC端</h3>
                    <h4>推荐PC端进入</h4>
                    <h4>使用技术：</h4>
                    <ul>
                        <li>
                            <b>require</b>：模块化搭建
                        </li>
                        <li>
                            <b>art-template</b>：模版搭建
                        </li>
                        <li>
                            <b>jQuery</b>：高效js代码
                        </li>
                        <li>
                            <b>gulp</b>：代码转换及压缩工具
                        </li>
                        <li>
                            <b>Swiper</b>：轮播图效果
                        </li>
                        <li>
                            <b>elevateZoom</b>：放大镜效果
                        </li>
                        <li>
                            <b>SASS</b>：工程化CSS
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '@/components/Header'
export default {
    name: 'Home',
    components: {
        Header
    },
    methods: {
        reactEvent () {
            window.open('http://101.201.68.146:6062', '_self')
        },
        vueEvent () {
            window.open('http://101.201.68.146:6063', '_self')
        },
        jQueryEvent () {
            window.open('http://101.201.68.146:6061', '_self')
        }
    }
}
</script>

<style lang="scss">
    .main{
        height: 100%;
        display: flex;
        flex-direction: column;
        .card-box{
            flex: 1;
            // height: 100%;
            .columns{
                height: 100%;
                .column{
                    height: 100%;
                    padding: 0 20px;
                    cursor: pointer;
                    &:nth-of-type(1){
                        background-color: #F5B670;
                    }
                    &:nth-of-type(2){
                        background-color: #652226;
                    }
                    &:nth-of-type(3){
                        background-color: #C099EC;
                    }
                    &:hover{
                        transform: translate(0,-20px);
                    }
                    h2 {
                        font-size: 40px;
                        font-weight: bold;
                        color: #fff;
                        text-align: center;
                    }
                    h3{
                        font-size: 30px;
                        font-weight: bold;
                        color: #fff;
                    }
                    h4{
                        font-size: 25px;
                        font-weight: bold;
                        color: #fff;
                    }
                    ul {
                        list-style-type: disc;
                        margin-left: 20px;
                        li {
                            font-size: 20px;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
</style>
